import * as React from 'react';
import { Layer } from 'office-ui-fabric-react/lib/Layer';
import './styles.less'
import { stat } from 'fs';

export interface ToastProps {
}

export interface IToastState {
  isShow: boolean
  message: string,
  type: 'Completed' | 'Warning' | 'Info' | 'ErrorBadge' | ''
}

export default class Toast extends React.Component<ToastProps, IToastState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isShow: false,
      message: '',
      type: ''
    }
  }

  show = (message, type: IToastState["type"]) => {
    console.log('show：')
    this.setState({
      isShow: true,
      message,
      type
    })
  }

  hide = () => {
    console.log('3s后执行')
    this.setState({
      isShow: false,
      message: '',
      type: ''
    })
  }
  closeTimer
  componentDidMount() {
    this.clearCloseTimer()
    this.closeTimer = setTimeout(() => {
      this.hide()
    }, 3000)
  }
  componentWillUpdate(props, state) {
    if (state.message) {
      this.clearCloseTimer()
      this.closeTimer = setTimeout(() => {
        this.hide()
      }, 3000)
    }
  }

  componentWillUnmount() {
    this.clearCloseTimer()
  }
  clearCloseTimer = () => {
    if (this.closeTimer) {
      clearTimeout(this.closeTimer)
      this.closeTimer = null
    }
  }
  render() {
    const { message, isShow, type } = this.state
    return (
      <React.Fragment>
        {isShow && <Layer className={`ms-Toast-Layer ${type}`}>
          <div className={`toast-wrap ${type}`}>
            <i className={`ms-Icon ms-Icon--${type}`} aria-hidden="true"></i>{message}
          </div>
        </Layer>}
      </React.Fragment>
    );
  }
}
